<template>
	<view class="user-container">
		<view class="user-header">
			<!-- 背景图区域 -->
			<view class="top-bg">
				<image class="bg-logo" src="@/static/logo/hksj-logo-white.png"></image>
			</view>
			<!-- 用户信息区域 -->
			<view class="user-wrapper">
				<view class="user-section">
					<view class="user-info">
						<!-- 头像 -->
						<!-- <view v-if="userInfo && userInfo.portrait">
							<image mode="widthFix" :src="showUserImgUrl"></image>
						</view> -->
						<image mode="widthFix" src="@/static/logo.png"></image>

						<view class="right-box">
							<view class="username">
								<text v-if="username!==null" class="name">
									{{username ? username : "您还未登录,点击登录"}}
								</text>
								<text v-else class="name">您还未登录,点击登录</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
							<view class="role">
								角色
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-service">
			<view class="divider">
				<view class="front">我的服务</view>
			</view>
			<view class="functions">
				<view class="function">
					<image class="icon" src="@/static/img/my-info.png"></image>
					<text class="name">我的信息</text>
				</view>
				<view class="function">
					<image class="icon" src="@/static/img/order.png"></image>
					<text class="name">我的工单</text>
				</view>
				<view class="function">
					<image class="icon" src="@/static/img/help.png"></image>
					<text class="name">使用帮助</text>
				</view>

				<!-- 退出登录 -->
				<view class="function" @click="signOut">
					<image class="icon" src="@/static/img/signout.png"></image>
					<text class="name">退出登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	export default {
		computed: {
			// 通过计算属性将 state 中的 username 映射到组件
			username() {
				return this.$store.state.userStore.username;
			},
		},
		onLoad(options) {
			console.log('用户名', this.username);
			if (options.scene) {
				try {
					const token = uni.getStorageSync('token');
					if (token) {
						this.getInfo();
					} else {
						// 没有token则未登录
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}
				} catch (e) {
					// 未登录
				}
			}
		},
		created() {},
		data() {
			return {
				title: '华康世纪医疗',
			}
		},
		onPullDownRefresh() {
			uni.reLaunch({
				url: '/pages/user/user'
			});
		},
		methods: {
			...mapMutations('userStore', ['updateName']), // 引入命名空间store/modules/userStore.js的方法
			signOut() {
				this.updateName('---');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fcfcfc;
	}

	.user-header {
		position: relative;

		.top-bg {
			display: flex;
			background-color: #3c9cff;
			position: relative;
			width: 100%;
			height: 480rpx;
			justify-content: center;
			align-items: center;
			margin-bottom: 100rpx;

			.bg-logo {
				margin-top: -20rpx;
				width: 80%;
				height: 23%;
			}
		}

		.user-wrapper {
			position: absolute;
			width: 100%;
			display: flex;
			justify-content: center;
			bottom: -75rpx;

			.user-section {
				box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
				position: relative;
				width: 100%;
				background-color: white;
				float: right;
				margin: 20upx 40upx;
				padding: 20upx;
				border-radius: 10upx;

				.user-info {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 50rpx;

					image {
						width: 140.67rpx;
						height: 140.67rpx;
						border-radius: 50%;
						margin-right: 50rpx;
						box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
					}

					.right-box {
						display: flex;
						flex-direction: column;

						.username {
							display: flex;

							.name {
								font-weight: bold;
								font-size: 36rpx;
								margin-right: 20rpx;
							}
						}

						.role {
							color: #248AF7;
							font-size: 24rpx;
							margin-top: 4rpx;
						}
					}
				}
			}
		}
	}

	.my-service {
		box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		background-color: white;
		margin: 00upx 40upx 40upx;
		border-radius: 10upx;

		.divider {
			margin-top: 70upx;
			display: flex;
			padding: 40rpx 0 10rpx 40rpx;
			align-items: flex-end;

			.front {
				font-size: 35rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}

			.rear {
				font-size: 25rpx;
				color: #c3c3c3;
			}
		}

		.functions {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.function {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				margin-bottom: 30rpx;

				.icon {
					width: 60rpx;
					height: 60rpx;
				}

				.name {
					background-color: white;
					border: 0;
					padding: 0 0 10rpx 0;
					color: #9e9e9e;
					font-size: 25rpx;
				}
			}
		}
	}
</style>